<template>
  <div>
    <h4 class="rad-txt" style="margin-top:-50px">
      <span class="abtxt1">我的</span>
      <span class="abtext">收藏</span>
    </h4>
    <div ref="table">
      <el-table
        :data="page.list"
        border
        style="width: 1411px;margin-left: 100px;"
        :stripe="true"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column
          prop="bookImage"
          label="封面"
          width="210"
          align="center"
        >
          <template slot-scope="{ row }">
            <img
              :src="row.bookImage"
              alt=""
              style="height: 120px;width: 100px;"
              @click="showSingleInfo(row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="bookShowname" label="书名" width="300">
        </el-table-column>
        <el-table-column prop="bookAuth" label="作者" width="250">
        </el-table-column>
        <el-table-column prop="bookPrice" label="单价/元" width="250">
        </el-table-column>
        <el-table-column prop="typeName" label="图书类别" width="250">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
                @click="cancelCollect(scope.row.bookId)"
                type="danger"
                icon="el-icon-star-off"
                round
                >取消收藏</el-button
              >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row style="margin-left: 150px;">
      <el-col :span="5">
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageNumChange"
          :current-page="page.current"
          :page-sizes="[1, 5, 10]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: {}
    };
  },
  methods: {
    pageSizeChange(size) {
      this.page.current = 1;
      this.splitePage(this.page.current, size);
    },
    pageNumChange(current) {
      this.splitePage(current, this.page.size);
    },
    listCollectList() {
      //查找全部
      //调用分页函数
      this.splitePage(this.page.current, this.page.size);
    },
    splitePage(pageNum, pageSize) {
      this.$http
        .get("/userInfo/user/selectCollectRank", {
          params: {
            pageNum: pageNum,
            pageSize: pageSize
          }
        })
        .then(resp => {
          //将分页信息传入data区中
          this.page = resp.data.data;
        });
    },
    showSingleInfo(obj) {
      sessionStorage.setItem("singleBookId", obj.bookId);
      this.$router.push("/showSingleBookInfo");
    },
    cancelCollect(bookId) {
      if (localStorage.getItem("token") == null) {
        alert("请先登录");
        return;
      }
      this.$http
        .get("/userInfo/user/cancelCollect?bookId=" + bookId)
        .then(resp => {
          alert(resp.data.message);
          this.listCollectList();
        });
    }
  },
  created() {
    this.listCollectList();
  }
};
</script>

<style scoped>
@import "../../../assets/login/css/style.css";
</style>
